<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜单信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="handleCreate">新增菜单</el-button>
          </div>
          <el-table
            v-loading="loadingTableVisible"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            default-expand-all
            row-key="id"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            :data="list"
            border
            size="mini"
          >
            <el-table-column label="编号" prop="id" align="center" width="80" type="selected">
              <template slot-scope="scope">
                <span>
                  <el-radio v-model="radio" @change="handleAuth" :label="scope.row.id"></el-radio>
                </span>
                <span>
                  <i class="el-icon-caret-top" @click="handleSort(scope.row.id,+1)" title="向上移动"></i>
                  <i
                    class="el-icon-caret-bottom"
                    @click="handleSort(scope.row.id, -1)"
                    title="向下移动"
                  ></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="标题">
              <template slot-scope="scope">
                <span v-if="scope.row.isVisble">
                  <i
                    class="el-icon-view"
                    style="cursor: pointer;"
                    @click="handleVisble(scope.row.id)"
                  ></i>
                  &nbsp;{{scope.row.title}}
                </span>
                <span style="text-decoration: line-through;color: #dfe6ec;" v-else>
                  <i
                    class="el-icon-view"
                    style="cursor: pointer;"
                    @click="handleVisble(scope.row.id)"
                  ></i>
                  &nbsp;{{scope.row.title}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="名称">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column label="页面路径">
              <template slot-scope="scope">
                <span>{{scope.row.path}}</span>
              </template>
            </el-table-column>
            <el-table-column label="组件">
              <template slot-scope="scope">
                <span>{{scope.row.component}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="140" fixed="right">
              <template slot-scope="{row}">
                <el-button type="primary" class="list-mini-btn" @click="handleUpdate(row)">编辑</el-button>
                <el-button type="danger" class="list-mini-btn" @click="handleDelete(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>权限信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="saveTreeData">保存</el-button>
          </div>
          <el-tree
            ref="tree"
            :data="data"
            show-checkbox
            node-key="name"
            highlight-current
            :props="defaultProps"
          />
        </el-card>
      </el-col>
    </el-row>

    <!--创建与编辑-->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" width="40%">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="rigth"
        label-width="70px"
      >
        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="temp.parentId" filterable placeholder="上级">
            <el-option
              v-for="(item,index) in options"
              :key="parseInt(index)"
              :label="item"
              :value="parseInt(index)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="temp.title"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="temp.name"></el-input>
        </el-form-item>
        <el-form-item label="页面路径" prop="path">
          <el-input v-model="temp.path"></el-input>
        </el-form-item>
        <el-form-item label="组件" prop="component">
          <el-input v-model="temp.component"></el-input>
        </el-form-item>
        <el-form-item label="重定向" prop="redirect">
          <el-input v-model="temp.redirect"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="temp.icon"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="temp.alwaysShow" label="始终显示根目录" border></el-checkbox>
          <el-checkbox v-model="temp.isVisble" label="是否可见" border></el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import { getPermission } from "@/api/account";
import {
  getMenuList,
  getMenuInfo,
  saveMenuInfo,
  deleteMenuInfo,
  getMenuPermissions,
  authoriza,
  visble,
  sort,
  dictionary
} from "@/api/auth/menu";
const model = {
  id: undefined,
  parentId: undefined,
  title: undefined,
  name: undefined,
  path: undefined,
  isVisble: false,
  component: undefined,
  redirect: undefined
};
export default {
  directives: { waves },
  data() {
    return {
      list: [], //列表集合
      temp: {}, //详情
      options: [], //菜单集合
      data: [], //权限集合
      defaultProps: {
        children: "children",
        label: "displayName"
      },
      loadingTableVisible: false,
      dialogFormTitle: undefined,
      dialogFormVisible: false,
      radio: "",
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getMenus();
  },
  mounted() {},
  methods: {
    getMenus() {
      getPermission().then(response => {
        this.data = response.data.menus;
      });
      this.loadingTableVisible = true;
      getMenuList(this.listQuery)
        .then(response => {
          this.loadingTableVisible = false;
          this.list = response.data;
        })
        .catch(err => {
          this.loadingTableVisible = false;
          console.error(err);
        });
    },
    resetTemp() {
      this.temp = model;
    },
    getDictionary() {
      dictionary().then(response => {
        this.options = response.data;
      });
    },
    handleVisble(id) {
      visble(id).then(response => {
        this.$message({
          message: response.message,
          type: response.success ? "success" : "error"
        });
        this.getMenus();
      });
    },
    handleAuth() {
      getMenuPermissions(this.radio).then(response => {
        this.$refs.tree.setCheckedKeys(response.data);
      });
    },
    handleUpdate(row) {
      const loading = this.$loading({ text: "正在加载数据..." });
      this.getDictionary();
      getMenuInfo(row.id)
        .then(response => {
          loading.close();
          this.dialogFormVisible = true;
          this.dialogFormTitle = "编辑：" + response.data.title;
          this.temp = response.data;
        })
        .catch(err => {
          console.error(err);
          loading.close();
        });
    },
    handleDelete(row) {
      this.$confirm("确定删除菜单？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const loading = this.$loading({ text: "正在删除数据..." });
        deleteMenuInfo(row.id)
          .then(response => {
            loading.close();
            this.$message({
              message: response.message,
              type: response.success ? "success" : "error"
            });
            this.getMenus();
          })
          .catch(err => {
            loading.close();
            console.error(err);
          });
      });
    },
    handleCreate() {
      this.getDictionary();
      this.resetTemp();
      this.dialogFormVisible = true;
      this.dialogFormTitle = "添加菜单";
    },
    saveData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const loading = this.$loading({ text: "正在保存数据" });
          saveMenuInfo(this.temp)
            .then(response => {
              loading.close();
              this.dialogFormVisible = false;
              this.$message({
                message: response.message,
                type: response.success ? "success" : "error"
              });
              this.getMenus();
              this.resetTemp();
            })
            .catch(err => {
              loading.close();
            });
        }
      });
    },
    handleSort(id, value) {
      sort(id, value)
        .then(response => {
          this.getMenus();
        })
        .catch(err => {
          this.getMenus();
        });
    },
    saveTreeData() {
      if (
        this.radio === "" ||
        this.radio === 0 
      ) {
        this.$message({ message: "请选择对应的菜单授权", type: "error" });
        return;
      }
      const loading = this.$loading({ text: "正在授权" });
      var data = {
        id: this.radio,
        values: this.$refs.tree.getCheckedKeys()
      };
      authoriza(data)
        .then(response => {
          loading.close();
          this.$message({
            message: response.message,
            type: response.success ? "success" : "error"
          });
        })
        .catch(err => {
          loading.close();
        });
    }
  }
};
</script>

<style scoped>
.el-icon-caret-top {
  position: absolute;
  cursor: pointer;
}
.el-icon-caret-bottom {
  cursor: pointer;
}
.el-icon-caret-top:hover {
  color: crimson;
}
.el-icon-caret-bottom:hover {
  color: green;
}
</style>